<template>
  <div>
    <TbTitle title="（一）资产负债表" />
    <div style="line-height: 40px;">单位：元</div>
    <div class="table-box" style="display: flex;">
      <div>
        <table border="" class="m-table">
          <tr>
            <td style="width: 16%;">负债和净资产</td>
            <td style="width: 10%;">行次</td>
            <td style="width: 12%;">年初数</td>
            <td style="width: 12%;">期末数</td>
          </tr>

          <template v-for="(item, index) in tableData1">
            <tr v-if="item.fieldDirectory == 1">
              <td colspan="4" style="text-align: left;padding-left:20px;">{{ item.assetTermName }}</td>
            </tr>
            <tr v-else>
              <td>{{ item.assetTermName }}</td>
              <td>{{ item.fieldSort }}</td>
              <td>{{ item.startBalance }}</td>
              <td>{{ item.endBalance }}</td>
            </tr>
          </template>
        </table>
      </div>
      <div>
        <table border="" class="m-table">
          <tr>
            <td style="width: 16%;">负债和净资产</td>
            <td style="width: 10%;">行次</td>
            <td style="width: 12%;">年初数</td>
            <td style="width: 12%;">期末数</td>
          </tr>
          <template v-for="(item, index) in tableData2">
            <tr v-if="item.fieldDirectory == 1">
              <td colspan="4" style="text-align: left;padding-left:20px;">{{ item.assetTermName }}</td>
            </tr>
            <tr v-else>
              <td>{{ item.assetTermName }}</td>
              <td>{{ item.fieldSort }}</td>
              <td>{{ item.startBalance }}</td>
              <td>{{ item.endBalance }}</td>
            </tr>
          </template>
        </table>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import TbTitle from '@/views/yearCheck/components/TbTitle.vue'
import { reactive, ref, inject } from 'vue'

let tableData1 = ref([])
let tableData2 = ref([])

const { getDetailInfo } = inject('getDetailInfo')

getDetailInfo().then(res => {
  // detailInfo.value = res
  dealData(res.data)
})
let dealData = (data) => {
  data.forEach((item, index) => {
    if (item.fieldType == 1) {
      tableData1.value.push(item)
    } else if (item.fieldType == 2) {
      tableData2.value.push(item)
    }
  })
}

</script>
<style lang="scss" scoped>
.msg-tip {
  padding: 20px 0;
  color: #000;
  font-family: '微软雅黑';
}


.table-box {
  display: flex;

  >div {
    width: 50%
  }
}

table {
  border-spacing: 0px;
  width: 100%;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  color: #000;

  thead {
    background: #f5f7fa;
    color: rgb(37, 43, 53);

    th {
      border-right: 1px solid #999;
      border-bottom: 1px solid #999;
      text-align: center;
      height: 40px;
    }
  }

  tbody {
    td {
      height: 40px;
      border-right: 1px solid #999;
      border-bottom: 1px solid #999;
      text-align: center;

      &.td-head {
        background: #f5f7fa;
      }
    }
  }
}
</style>
